<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>课堂助手</title>
    <link rel="stylesheet" href="css/m-question.css">

</head>
<body>
    <section>
        <div class="wrap">
            <section>
                <div class="nav-line" onclick="show('bulletin')">
                    公告栏
                    <img src="image/down-arrow.png" alt="下拉">
                </div>
                <div id="bulletin" class="open">
                    <div class="content">
                        <div class="content-time">2017-08-08</div>
                        <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                    </div>
                    <div class="content">
                        <div class="content-time">2017-08-08</div>
                        <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                    </div>
                    <div class="content">
                        <div class="content-time">2017-08-08</div>
                        <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                    </div>
                    <div class="content">
                        <div class="content-time">2017-08-08</div>
                        <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                    </div>
                    <div class="content">
                        <div class="content-time">2017-08-08</div>
                        <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                    </div>
                    <div class="content">
                        <div class="content-time">2017-08-08</div>
                        <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                    </div>
                    <div class="content">
                        <div class="content-time">2017-08-08</div>
                        <div class="content-inner">公告公告公告公告这里是公告 这里是公告公告公告公告公告这里是公告 这里是公告</div>
                    </div>
                </div>
            </section>
            <section>
                <div class="nav-line " onclick="show('resource')">
                    资料库
                    <img src="image/down-arrow.png" alt="下拉">
                </div>
                <div id="resource" class="close">
                    <div class="content flex-content">
                        <div class="content-name">js权威指南</div>
                        <div class="content-small">134M</div>
                        <span><img class="content-img" src="image/download.png" alt="下载"></span>
                    </div>
                    <div class="content flex-content">
                        <div class="content-name">js权威指南</div>
                        <div class="content-small">134M</div>
                        <img class="content-img" src="image/download.png" alt="下载">
                    </div>
                    <div class="content flex-content">
                        <div class="content-name">js权威指南</div>
                        <div class="content-small">134M</div>
                        <img class="content-img" src="image/download.png" alt="下载">
                    </div>
                    <div class="content flex-content">
                        <div class="content-name">js权威指南</div>
                        <div class="content-small">134M</div>
                        <img class="content-img" src="image/download.png" alt="下载">
                    </div>

                </div>
            </section>
            <section>
                <div class="nav-line " onclick="show('question')">
                    课堂问题
                    <img src="image/down-arrow.png" alt="下拉">
                </div>
                <div id="question" class="close">
                    <div class="content">
                        <div class="content-head">Q5:英文中有多少个英文字母?</div>
                        <div class="upload">
                            <div class="content-input"><input type="text" placeholder="请输入答案"></div>
                            <img src="image/upload.png" alt="提交答案">
                        </div>
                    </div>
                    <div class="content">
                        <div class="content-head">Q5:英文中有多少个英文字母?</div>
                        <div class="content-inner">我的答案：<span class="content-answer">26</span></div>
                    </div>
                    <div class="content">
                        <div class="content-head">Q5:英文中有多少个英文字母?</div>
                        <div class="content-inner">我的答案：<span class="content-answer">26</span></div>
                    </div>
                    <div class="content">
                        <div class="content-head">Q5:英文中有多少个英文字母?</div>
                        <div class="content-inner">我的答案：<span class="content-answer">26</span></div>
                    </div>
                </div>
            </section>

        </div>
    </section>
</body>
<script>
    var h = document.getElementsByClassName('nav-line')[0].offsetHeight;
    var s_h = window.innerHeight - h*3;
    var isMoving = false;
    document.getElementsByClassName('open')[0].style.height = s_h+'px';
    function show(a) {
        var div =  document.getElementById(a);
        if(isMoving==false){
            if (div.className=='open'){
//                isMoving=true;
//                div.style.height = '0px';
//                setTimeout(function () {
//                    div.className = 'close';
//                    isMoving = false;
//                },1000);
            }else{
                var open = document.getElementsByClassName('open')[0];
                open.style.height = '0px';
//                open.className = 'close';
                div.className = 'open';
                div.style.height = s_h+'px';
                isMoving = true;
                setTimeout(function () {
//                    console.log();
                    open.className = 'close';
                    isMoving = false;
                },1000);
            }
        }


    }
</script>
<script src="script/require.js" defer async="true" ></script>
<script src="script/require.js" data-main="script/m-question-main.js"></script>
</html>